<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // 鼠标拖拽元素移动
    // 1. 鼠标按下 => 选中元素,元素可以移动(记录按下的位置)
    // 2. 鼠标移动 => 盒子跟随鼠标相对于按下的位置移动
    // 3. 鼠标松开 => 盒子不在跟随鼠标移动


    // 分析元素拖拽 => 拖拽页面中的元素  => 
    // 1. 鼠标按下 => 开始拖拽
    // 2. 鼠标移动 => 拖拽元素移动
    // 3. 鼠标松开 => 停止拖拽

    // 最简单的面向对象 => 字面量对象 => 把面向过程中的变量和函数 整合到对象中,作为对象的属性和方法

    // 事件监听中的this => 绑定事件的元素
    // document.addEventListener("click", function () {
    //     console.log(this);
    // })

    // var obj = {
    //     handler: function () {
    //         console.log(this);
    //     }
    // }

    // document.addEventListener("click", obj.handler);
    // document.addEventListener("click", function () {
    //     console.log(this);
    // });



    // var obj = {
    //     handler: function () {
    //         console.log(this);
    //     }
    // }

    // document._this = obj;
    // document.addEventListener("click", obj.handler);
    // document.addEventListener("click", function () {
    //     var _this = this._this;

    //     console.log(this);  // document
    //     console.log(_this); // obj
    // });





    var dragEle = {
        target: document.getElementsByClassName("box")[0], // 目标元素
        posX: null,
        posY: null,
        dragStart: function () {
            // this -> dragEle
            // this.target  => box => 元素节点(对象) => 可以绑定自定义属性
            this.target._this = this;  //  box._this = dragEle;
            this.target.addEventListener("mousedown", this.mouseHandler);
        },
        dragEnd: function () {
            // this -> dragEle
            this.target._this = this;
            this.target.removeEventListener("mousedown", this.mouseHandler);

            // document._this = this;  // document._this = dragEle
            // document.removeEventListener("mousemove", this.mouseHandler);
            // document.removeEventListener("mouseup", this.mouseHandler);
        },
        // dragMove: function () { },
        // dragEnd: function () { },
        mouseHandler: function (e) {
            var e = e || window.event;
            if (e.type == "mousedown") { //  this -> 绑定事件的元素box
                // 如何将posX posY 存储到dragEle上
                // posX = e.offsetX;
                // posY = e.offsetY;
                // console.log(posX, posY, this);  // this -> 绑定事件的元素box

                // this-> box  => 借助元素box传递数据(dragEle)

                var _this = this._this;  //  _this = box._this => dragEle

                _this.posX = e.offsetX;
                _this.posY = e.offsetY;
                console.log(this);
                console.log(_this);

                // document(对象) => 给document绑定自定义属性(_this) =>指向dragEle
                document._this = _this;  // document._this = dragEle
                document.addEventListener("mousemove", _this.mouseHandler);
                document.addEventListener("mouseup", _this.mouseHandler);
            } else if (e.type == "mousemove") { // this -> document
                var e = e || window.event;
                // 元素在document中移动时 => 需要借助posX posY(dragEle中)
                // 但是this指向document    => 无法直接获取dragEle

                var _this = this._this; // _this =  document._this => dragEle

                var x = e.pageX - _this.posX;
                var y = e.pageY - _this.posY;

                console.log(_this); // dragEle


                _this.target.style.left = x + "px";
                _this.target.style.top = y + "px";
            } else if (e.type == "mouseup") {
                // 清除时 获取dragEle的mouseHandler  => 如何获取
                // this => document 
                var _this = this._this; //  _this =  document._this => dragEle

                document.removeEventListener("mousemove", _this.mouseHandler);
                document.removeEventListener("mouseup", _this.mouseHandler);
            }
        }

    }


    dragEle.dragStart(); //开始拖拽
    // dragEle.dragEnd(); //关闭拖拽



    /*  var box = document.getElementsByClassName("box")[0];
     var posX = null;
     var posY = null;
 
     box.addEventListener("mousedown", mouseHandler);
 
     // 鼠标按下 移动 松开 都触发同一个函数 => 对应事件类型区分 => 执行不同的内容
     function mouseHandler(e) {
         var e = e || window.event;
         if (e.type == "mousedown") {
             posX = e.offsetX;
             posY = e.offsetY;
             console.log(posX, posY);
 
             document.addEventListener("mousemove", mouseHandler);
             document.addEventListener("mouseup", mouseHandler);
         } else if (e.type == "mousemove") {
             var e = e || window.event;
             var x = e.pageX - posX;
             var y = e.pageY - posY;
 
             box.style.left = x + "px";
             box.style.top = y + "px";
         } else if (e.type == "mouseup") {
             document.removeEventListener("mousemove", mouseHandler);
             document.removeEventListener("mouseup", mouseHandler);
         }
     } */






</script>

</html>